<!---流程流程详情--->
<template>
  <div>
    <el-drawer
      :visible.sync="drawerVisible"
      :size="isHalf?'50%':'40%'"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :append-to-body="true"
      :with-header="false"
      :wrapper-closable="false"
    >
      <el-container>
        <el-header>
          <div>{{ flowInstances.CustomName }}详情</div>
          <div>
            <el-button size="small" @click="isHalf=!isHalf">{{ isHalf?'小屏':'半屏' }}</el-button>
          </div>
        </el-header>

        <el-tabs type="card">

          <el-tab-pane label="流程详情">
            <el-main class="edit-form main-full-height">
              <el-form
                label-position="right"
                label-width="100px"
              >
                <el-form-item label="标题">
                  <el-input
                    v-model="flowInstances.CustomName"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="流程号">
                  <el-input
                    v-model="flowInstances.Code"
                    disabled
                  />
                </el-form-item>
              </el-form>
              <CreatedForm
                v-if="createdFormData.list && createdFormData.list.length > 0 && drawerVisible"
                ref="createdForm"
                insite="true"
                :data="createdFormData"
                :value="formValue"
                :remote="remoteFuncs"
              />
              <el-divider>审批情况</el-divider>
              <el-form
                label-position="right"
                label-width="100px"
              >
                <el-form-item label="流程状态">
                  <el-input
                    v-model="flowInstances.InstanceResultDesc"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="提单人">
                  <el-input
                    v-model="flowInstances.CreateUserName"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="提单时间">
                  <el-input
                    v-model="flowInstances.FormatCreateTime"
                    disabled
                  />
                </el-form-item>
              </el-form>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="审批记录">
            <el-main class="edit-form main-full-height">
              <div class="main padding-tb-sm">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :icon="activity.icon"
                    :type="activity.type"
                    :color="activity.color"
                    :size="activity.size"
                    :timestamp="activity.timestamp"
                    placement="top"
                  >
                    <div class="data-log">
                      <div class="flex-between padding-tb-sm">
                        <div>
                          <span class="bold padding-lr-sm">{{ activity.NodeName }}</span>
                          <span class="blue bold padding-lr"> {{ activity.CreateUserName }} </span>
                          {{ activity.OperationType==2?activity.OpinionDesc:"" }}
                        </div>

                      </div>
                      <div class="flex-between">
                        <div>
                          <span class="text-sm ">{{ activity.Content }} {{ activity.OperationType==9?"  说明:"+activity.Remark:"" }}</span>
                        </div>
                        <div />
                      </div>
                      <div v-if="activity.Attacth" class="margin-top-sm">
                        <Upload :data="JSON.parse(activity.Attacth)" :disabled="true" />
                      </div>
                      <div v-if="activity.OperationType!=9">
                        <div v-for="com in activity.comments" :key="com.Id" class="bg-grey light text-sm padding-lr  radius margin-top">
                          <div class="comment-item padding-tb-sm">
                            <div class="flex-start">
                              <div> <span class="text-bold">{{ com.CreateUserName }}</span> 的评论 </div>
                              <div class="margin-left"> {{ com.CreateTime }}</div>
                              <el-button v-if="com.CommentNodeId===flowInstances.PreviousId&& com.CanDel" type="text" class="margin-left grey" size="small" @click="delComment(com.Id)"> 删除</el-button>
                            </div>
                            <div class="margin-top-sm">
                              {{ com.Content }}
                            </div>
                            <div v-if="com.Users" class="flex-start flex-wrap margin-top-sm">
                              <span v-if="com.Users.length>0">提醒关注：</span>
                              <el-tag v-for="u in com.Users" :key="u.Id" :hit="false" size="mini" class="margin-xs">@{{ u.Name }} </el-tag>
                            </div>
                            <div v-if="com.Attachment" class="margin-top-sm">
                              <Upload :data="JSON.parse(com.Attachment)" :action="uploadUrl" :disabled="true" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-timeline-item>
                  <el-timeline-item v-if="flowInstances.InstanceResult ===1">
                    {{ flowInstances.ActivityName }}(审批中)
                  </el-timeline-item>
                  <el-timeline-item v-if="flowInstances.InstanceResult ===2" size="large" type="primary" icon="el-icon-success">
                    审批完成
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-main>
          </el-tab-pane>
          <el-tab-pane label="审批流程">
            <el-main class="edit-form main-full-height">
              <div class="main padding-tb-sm flownode">
                <el-timeline>
                  <el-timeline-item
                    v-for="(node, index) in flowNode"
                    :key="index"
                    :icon="node.NodeId==flowInstances.ActivityId?'el-icon-more':'el-icon-success'"
                    :color="node.NodeId==flowInstances.ActivityId?'#f7a200':'#05b54a'"
                    size="large"
                    :hide-timestamp="true"
                    :class="node.NodeId==flowInstances.ActivityId?'todo':''"
                  >
                    <div class="data-log">
                      <div class="flex">
                        <div>
                          <span class="bold padding-lr-sm">{{ node.NodeName }}{{ node.NodeId==flowInstances.ActivityId?" (审批中)":"" }}</span>
                        </div>
                      </div>
                      <div class="" style="margin:10px;">
                        <div>
                          <span class="text-sm ">{{ node.Markers }}</span>
                        </div>
                      </div>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-main>
          </el-tab-pane>
        </el-tabs>

        <el-footer style="height:auto;min-height:60px">
          <div>
            <el-button
              size="medium"
              @click="onCancel"
            >返回</el-button>
            <el-button size="medium" type="primary" class="margin-left" @click="handleHastenTask">催办</el-button>
            <el-button v-if="flowInstances.InstanceResult != 2" size="medium" type="primary" class="margin-left" @click="handleComment">添加评论</el-button>
            <el-button v-if="flowInstances.CanBeAudit" size="medium" type="primary" class="margin-left" @click="handleBack">退回</el-button>
            <el-button v-if="flowInstances.CanBeAudit" size="medium" type="primary" class="margin-left" @click="handleSend">转交审批</el-button>
            <el-button v-if="flowInstances.CanBeAudit" size="medium" type="primary" class="margin-left" @click="handleApostille">加签</el-button>
            <el-button
              v-if="flowInstances.CanBeAudit"
              size="medium"
              type="primary"
              @click="onAudit"
            >{{ flowInstances.ActivityType===6?'签收':flowInstances.ActivityType===7?'发放':'审批' }}</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-drawer>
    <!-- 转交窗口 -->
    <el-dialog
      title="请填写转交信息"
      :visible.sync="tranforTaskDialogVisible"
      width="600px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-container>
        <el-main style="padding: 10px 0 ;height:auto;max-height:60vh;">
          <div class="text-sm gray">当此单据你无法作出审批决策，或者需要他人协助审批决策时，可通过「转交审批」来进行处理。</div>
          <div class="margin-top">
            <div><span class="red">*</span>请选择需要转交的人：<span class="red">请谨慎选择，提交后将无法更改</span></div>
            <div class=" flex margin-top-sm">
              <el-input v-model="send.username" placeholder="请选择需要转交的人" size="mini" disabled class="flex-sub text-right" />
              <el-button size="mini" class="margin-left" @click="chooseSendUser">选择</el-button>
            </div>
          </div>
          <div class="margin-top">
            <div>请选择转交理由：</div>
            <el-input
              v-model="send.content"
              type="textarea"
              :rows="5"
              placeholder="选填，请填写转交的理由或意见。"
              maxlength="500"
              show-word-limit
              class="margin-top-sm"
            />
          </div>
          <div class="margin-top-sm ">
            <Upload :data.sync="send.attacth" :action="uploadUrl" :title="'上传附件'" />
          </div>
        </el-main>
        <el-footer>
          <div>
            <el-button
              size="medium"
              @click="sendCancel"
            >返回</el-button>
            <el-button
              type="primary"
              size="medium"
              @click="submitSend"
            >确认转交</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-dialog>
    <!-- 退回窗口 -->
    <el-dialog
      title="请填写退回信息"
      :visible.sync="backFlowDialogVisible"
      width="600px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-container>
        <el-main style="padding: 10px 0 ;height:auto;max-height:60vh;">
          <div class="margin-top">
            <div><span class="red">*</span>请选择退回的节点：<span class="red">请谨慎选择，提交后将无法更改</span></div>
            <div class=" flex margin-top-sm">
              <el-select v-model="backFlow.nodeId">
                <el-option v-for="node in historyNodes" :key="node.value" :label="node.Label" :value="node.Value" />
              </el-select>
            </div>
          </div>
          <div class="margin-top">
            <div>请选择退回原因：</div>
            <el-input
              v-model="backFlow.content"
              type="textarea"
              :rows="5"
              placeholder="选填，请填写退回原因。"
              maxlength="500"
              show-word-limit
              class="margin-top-sm"
            />
          </div>
          <div class="margin-top-sm ">
            <Upload :data.sync="backFlow.attacth" :action="uploadUrl" :title="'上传附件'" />
          </div>
        </el-main>
        <el-footer>
          <div>
            <el-button
              size="medium"
              @click="backCancel"
            >返回</el-button>
            <el-button
              type="primary"
              size="medium"
              @click="submitBackFlow"
            >确认退回</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-dialog>
    <!-- 评论弹窗 -->
    <el-dialog
      title="添加评论"
      :visible.sync="commentDialogVisible"
      width="600px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-container>
        <el-main style="padding: 10px 0 ;height:auto;max-height:60vh;">
          <el-input
            v-model="comment.content"
            type="textarea"
            :rows="5"
            placeholder="请填写评论"
            maxlength="500"
            show-word-limit
          />
          <div class="margin-top ">
            <div>
              <el-button size="small" @click="addAttention">@提醒关注</el-button>
              <div>
                <el-tag v-for="item in selectUser" :key="item.Id" size="small" type="primary" closable class="margin-top-sm margin-right-sm"> @{{ item.Name }}</el-tag>
              </div>
            </div>
            <Upload :data.sync="comment.attacth" :action="uploadUrl" :title="'上传附件'" />
          </div>
        </el-main>
        <el-footer>
          <div>
            <el-button
              size="medium"
              @click="commentCancel"
            >返回</el-button>
            <el-button
              type="primary"
              size="medium"
              @click="submitComment"
            >提交评论</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-dialog>
    <!--审批-->
    <el-dialog
      :title="flowInstances.ActivityType===6?'签收':flowInstances.ActivityType===7?'发放':'审核' +'意见'"
      :visible.sync="dialogVisible"
      width="600px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-container>
        <el-main style="padding: 10px 0">

          <div class="margin-top">
            <el-input
              v-model="verification.VerificationOpinion"
              type="textarea"
              :rows="10"
              placeholder="填写意见(非必填)"
              maxlength="500"
              show-word-limit
            />
          </div>
          <div class="margin-top-sm ">
            <Upload :data.sync="verification.attacth" :action="uploadUrl" :title="'上传附件'" />
          </div>
        </el-main>
        <el-footer>
          <div>
            <el-button
              size="medium"
              @click="verificationFun(2)"
            >不同意</el-button>
            <el-button
              type="primary"
              size="medium"
              @click="verificationFun(1)"
            >同意</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-dialog>
    <el-dialog
      title="选择审批人"
      :visible.sync="dialogVerifyUserVisible"
      width="50%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-container>
        <el-main class="main-dialog">
          <div class=" text-normal ">领导审批<span class="margin-left gray light">2人及以上或签</span>          </div>
          <div class="flex-start ">
            <div
              v-for="item in selectUser"
              :key="item.Id"
              class="text-center black light text-normal"
            >
              <div class="avater bg-grey">
                <i class="el-icon-user-solid text-xxxl padding-top-sm white" />
              </div>
              {{ item.Name }}
            </div>

            <div class="text-center" @click="selectApprove">
              <div class="avater bg-blue">
                <i class="el-icon-plus text-xxxl padding-top-sm" />
              </div>
              请选择
            </div>

          </div>
        </el-main>
        <el-footer>
          <div>
            <!-- <el-button
              size="medium"
              @click="selectApprove"
            >选择审批人</el-button> -->
            <el-button
              size="medium"
              @click="dialogVerifyUserVisible=false"
            >取消</el-button>
            <el-button
              size="medium"
              @click="dialogVerifyUserVisible=false,customVerifiy()"
            >提交</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-dialog>
    <el-dialog
      title="选择人员"
      :visible.sync="approverUserVisible"
      width="600px"
      append-to-body
      class="promoter_person"
    >
      <el-container>
        <el-main class="flex">
          <div class="person_tree l">
            <ul>
              <li
                v-for="item in userSource"
                :key="item.Id"
                class="check_box not"
                :class="toggleClass(selectUser,item,'Id')&&'active'"
                @click="selectUser=[item]"
              >
                <a :title="item.Name"><img src="@/assets/images/icon_role.png">{{ item.Name }}</a>
              </li>
            </ul>
          </div>
          <div class="has_selected l">
            <p class="clear">已选（{{ selectUser.length }}）
              <a @click="selectUser=[]">清空</a>
            </p>
            <ul>
              <li
                v-for="item in selectUser"
                :key="item.Id"
              >
                <img src="@/assets/images/icon_role.png">
                <span>{{ item.Name }}</span>
                <img
                  src="@/assets/images/cancel.png"
                  @click="removeEle(selectUser,item,'Id')"
                >
              </li>
            </ul>
          </div>
        </el-main>
        <el-footer class="demo-drawer__footer clear">
          <div>
            <el-button @click="approverUserVisible = false">返回</el-button>
            <el-button
              type="primary"
              @click="approverUserVisible = false"
            >确定</el-button>
          </div>

        </el-footer>
      </el-container>
    </el-dialog>
    <!--加签-->
    <el-dialog
      title="选择加签人员"
      :visible.sync="apostilleDialogVisible"
      width="600px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-container>
        <el-main style="padding: 10px ;overflow:scroll;margin-bottom:50px;">
          <div class="text-sm gray">
            当此单据需要他人辅助审批时，可通过「加签审批」来进行处理。
          </div>
          <div class="margin-top">
            <div>
              <span class="red">*</span>请选择加签人员：<span
                class="red text-sm"
              >请谨慎选择，提交后将无法更改</span>
            </div>
            <div class="flex-start margin-top-sm">
              <el-button size="small" @click="addApostille">选择加签人员</el-button>
              <div>
                <el-tag
                  v-for="(item,index) in selectUser"
                  :key="item.Id"
                  size="small"
                  type="primary"
                  closable
                  class="margin-top-sm margin-right-sm"
                  @close="delApostille(index)"
                >
                  @{{ item.Name }}</el-tag>
              </div>
            </div>
          </div>
          <div class="margin-top">
            <el-input
              v-model="apostille.content"
              type="textarea"
              :rows="5"
              placeholder="选填，请填写加签理由。"
              maxlength="500"
              show-word-limit
              class="comment"
            />
            <!-- <el-checkbox v-model="apostille.auditPass" class="margin-top">加签并审批通过</el-checkbox> -->
            <Upload :data.sync="apostille.attachment" :action="uploadUrl" class="margin-top" />
          </div>
        </el-main>
        <el-footer class="foot foot-button">
          <div class="flex">
            <el-button size="medium" @click="apostilleCancel">取消</el-button>
            <el-button
              type="primary"
              size="medium"
              class="flex-sub"
              @click="submitApostille"
            >确认</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-dialog>

    <singlechoiceperson ref="singlechoicepersonDialog" :echo-list="singleSelectUser" @allSelect="singleChooseUser" />
    <selectPerson
      ref="selectPersonDialog"
      :echo-list="selectUser"
      @allSelect="chooseUser"
    />
  </div>
</template>
<script>
import CreatedForm from '@/components/flowset/Formcreated/components/CreatedForm'
import selectPerson from '@/views/components/permissions/selectperson'
import Upload from '@/components/uploadfile/index'
import singlechoiceperson from '@/views/components/permissions/singlechoiceperson'
import { config } from '@/utils/requestconfig'
import {
  getFlowInstances,
  approval,
  customVerifiy,
  addComment,
  sendAudit,
  getComment,
  delComment,
  queryHistories,
  getNewFlowOperationHistory,
  backFlow,
  getFlowNodes,
  hastenTask,
  apostille
} from '@/api/flow/index'
import { getUnitProject } from '@/api/project/project'
export default {
  components: {
    CreatedForm,
    selectPerson,
    singlechoiceperson,
    Upload
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['flowInstanceId'],
  data() {
    return {
      selectData: [], // 选择的流程
      activities: [],
      flowInstances: {},
      drawerVisible: false,
      dialogVisible: false,
      uploadUrl: config.uploadurl + 'upload/UploadFile',
      isHalf: false,
      commentDialogVisible: false, // 评论弹窗
      comment: {
        instanceId: '',
        commentNodeId: '',
        content: '',
        users: [],
        attacth: []
      },
      tranforTaskDialogVisible: false, // 转交弹窗
      send: {
        instanceId: '',
        userid: '',
        username: '',
        content: '',
        attacth: []
      },
      historyNodes: [],
      backFlowDialogVisible: false, // 退回
      backFlow: {
        instanceId: '',
        nodeId: '',
        content: '',
        attacth: []
      },
      apostilleDialogVisible: false, // 加签
      apostille: {
        instanceId: '',
        content: '',
        users: [],
        auditPass: true,
        attachment: []
      },
      verification: {
        flowInstanceId: '',
        VerificationFinally: '0',
        VerificationOpinion: '',
        ActivityNodeId: '',
        attacth: [],
        CustomVerifier: []
      },
      dialogVerifyUserVisible: false,
      approverUserVisible: false,
      userSource: [],
      selectUser: [],
      singleSelectUser: [],
      selfselection: '',
      flowNode: [],
      remoteFuncs: {
        searchProject(resolve) {
          getUnitProject()
            .then(res => {
              resolve(res.Data)
            })
            .catch(re => {})
        }
      }
    }
  },
  computed: {
    createdFormData() {
      var oo = {
        list: [],
        config: {}
      }
      if (this.flowInstances && this.flowInstances.FormContent) {
        oo.list = JSON.parse(this.flowInstances.FormContent)
        oo.list.forEach(item => {
          item.options.disabled = true
        })
      }
      return oo
    },
    formValue() {
      var defaultv = {}
      if (this.flowInstances && this.flowInstances.FormData) {
        defaultv = JSON.parse(this.flowInstances.FormData)
      }
      return defaultv
    }
  },
  watch: {
    // flowInstanceId: {
    //   deep: true,
    //   handler(val) {
    //     this.getFlowInstances(val)
    //   }
    // }
  },

  methods: {
    queryHistoriesData(id) {
      this.activities = []
      queryHistories(id).then(res => {
        getComment(id).then(com => {
          res.Data.forEach(item => {
            this.activities.push({
              CreateUserName: item.CreateUserName,
              Opinion: item.Opinion,
              OperationType: item.OperationType,
              OpinionDesc: item.OpinionDesc,
              Content: item.Content,
              Remark: item.Remark,
              timestamp: item.CreateTime,
              NodeName: item.NodeName,
              Attacth: item.Attacth,
              comments: com.Data.filter(o => o.CommentNodeId === item.NodeId) || [],
              size: 'large',
              type: 'primary',
              icon: 'el-icon-success'
            })
          })
        })
      })
    },
    getNewFlowOperationHistory(id) {
      getNewFlowOperationHistory(id).then(res => {
        this.historyNodes = res.Data
      })
    },
    getFlowNodes(id) {
      getFlowNodes(id).then(res => {
        this.flowNode = res.Data
      })
    },
    getOperationType(val) {
      var defaultV = ''
      switch (val) {
        case 1:
          defaultV = '发起'
          break
        case 2:
          defaultV = '审批'
          break
        case 3:
          defaultV = '抄送'
          break
        case 4:
          defaultV = '财务审核'
          break
        case 5:
          defaultV = '流程签收'
          break
        case 6:
          defaultV = '出纳支付'
          break
        default:
          defaultV = ''
          break
      }
      return defaultV
    },
    showBillDrawer(id) {
      this.getFlowInstances(id)
      this.queryHistoriesData(id)
      this.getNewFlowOperationHistory(id)
      this.getFlowNodes(id)
      this.drawerVisible = true
    },
    onCancel() {
      this.drawerVisible = false
      this.$emit('loaddata')
    },
    getFlowInstances(id) {
      getFlowInstances(id).then(res => {
        this.flowInstances = res.Data
      })
    },
    onAudit() {
      this.$refs.createdForm.getData().then(res => {
        this.verification = {
          flowInstanceId: this.flowInstances.Id,
          VerificationFinally: '0',
          VerificationOpinion: '',
          FormData: JSON.stringify(res), // 审批有编辑表单的情况 需要更新
          ActivityNodeId: this.flowInstances.ActivityId,
          CustomVerifier: [],
          attacth: []
        }
        var obj = {
          FlowInstanceId: this.flowInstances.Id,
          ActivityId: this.flowInstances.ActivityId
        }
        this.selectData.push(obj)
        this.selectUser = []
        this.userSource = []
        this.selfselection = ''
        // 发放操作 暂时无发放操作
        this.dialogVisible = true
      })
    },
    // 发放回调
    handleLoadData() {
      this.drawerVisible = false
      this.$emit('loadData')
    },
    onPrint() {
      this.$message({
        message: '无打印模板',
        type: 'error',
        duration: 3 * 1000
      })
      // printBill(this.flowInstances.Id).then(res => {
      //   var a = document.createElement('a')
      //   var event = new MouseEvent('click')
      //   a.href = res.Data
      //   a.target = 'blank'
      //   a.dispatchEvent(event)
      // })
    },
    verificationFun(v) {
      var _this = this
      _this.verification.VerificationFinally = v
      var userIds = []
      _this.selectUser.forEach(item => {
        userIds.push(item.Id)
      })
      var rData = Object.assign({}, _this.verification)
      rData.CustomVerifier = userIds
      rData.VerificationFinally = v
      rData.attacth = _this.verification.attacth.length > 0 ? JSON.stringify(_this.verification.attacth) : ''
      approval(rData).then(res => {
        if (res.Msg === 'selfselectionall') {
          this.selfselection = 'selfselectionall'
          this.dialogVerifyUserVisible = true
        } else if (res.Msg === 'selfselection') {
          this.selfselection = 'selfselection'
          this.userSource = res.Data
          this.dialogVerifyUserVisible = true
        } else {
          this.dialogVisible = false
          this.drawerVisible = false
          this.$emit('loadData')
          this.$store.dispatch('app/setTodo')
        }
      })
    },
    customVerifiy() {
      var _this = this
      var userIds = []
      _this.selectUser.forEach(item => {
        userIds.push(item.Id)
      })
      if (userIds.length < 1) {
        _this.$message({
          message: '请选择审批人',
          type: 'error',
          duration: 3 * 1000
        })
      }
      var data = { FlowInstanceId: _this.flowInstances.Id, CustomVerifier: userIds }
      customVerifiy(data).then(res => {
        if (res.Msg === 'selfselectionall') {
          _this.selfselection = 'selfselectionall'
          _this.dialogVerifyUserVisible = true
          // _this.instanceId = res.Extend
        } else if (res.Msg === 'selfselection') {
          _this.selfselection = 'selfselection'
          _this.userSource = res.Data
          _this.dialogVerifyUserVisible = true
          // _this.instanceId = res.Extend
        } else {
          _this.$message({
            message: '已提交，请等待审核',
            type: 'success',
            duration: 3 * 1000
          })
          this.dialogVisible = false
          this.drawerVisible = false
          this.$emit('loadData')
          this.$store.dispatch('app/setTodo')
        }
      })
    },
    selectApprove() {
      if (this.selfselection === 'selfselectionall') {
        // 选择所有人员
        this.$refs.selectPersonDialog.showSelectPersonDialog()
      } else if (this.selfselection === 'selfselection') {
        this.approverUserVisible = true
      }
    },
    chooseUser(users) {
      this.selectUser = []
      if (users && users.length > 0) {
        this.selectUser = users
      }
    },
    toggleClass(arr, elem, key = 'id') {
      return arr.some(item => {
        return item[key] === elem[key]
      })
    },
    removeEle(arr, elem, key = 'id') {
      var includesIndex
      arr.map((item, index) => {
        if (item[key] === elem[key]) {
          includesIndex = index
        }
      })
      arr.splice(includesIndex, 1)
    },
    handleComment() {
      this.commentDialogVisible = true
    },
    submitComment() {
      var _this = this
      _this.comment.instanceId = _this.flowInstances.Id
      _this.comment.users = _this.selectUser
      _this.comment.commentNodeId = _this.flowInstances.PreviousId
      var rData = Object.assign({}, _this.comment)
      rData.attachment = _this.comment.attacth.length > 0 ? JSON.stringify(_this.comment.attacth) : ''
      addComment(rData).then(res => {
        _this.commentCancel()
        _this.onCancel()
        _this.queryHistoriesData(_this.flowInstances.Id)
      })
    },
    commentCancel() {
      this.commentDialogVisible = false
      this.selectUser = []
      this.comment = {
        content: '',
        users: [],
        attacth: []
      }
    },
    delComment(id) {
      var _this = this
      this.$confirm('确认删除该评论吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delComment(id).then(res => {
          _this.queryHistoriesData(_this.flowInstances.Id)
        })
      })
    },
    addAttention() {
      this.$refs.selectPersonDialog.showSelectPersonDialog()
    },
    handleSend() {
      this.tranforTaskDialogVisible = true
    },
    submitSend() {
      var _this = this
      _this.send.instanceId = _this.flowInstances.Id
      var rData = Object.assign({}, _this.send)
      rData.attacth = _this.send.attacth.length > 0 ? JSON.stringify(_this.send.attacth) : ''
      sendAudit(rData).then(res => {
        _this.sendCancel()
        _this.onCancel()
      })
    },
    sendCancel() {
      this.tranforTaskDialogVisible = false
      this.selectUser = []
      this.send = {
        userid: '',
        username: '',
        content: '',
        attacth: []
      }
    },
    chooseSendUser() {
      this.$refs.singlechoicepersonDialog.singlepersonref()
    },
    singleChooseUser(users) {
      this.singleSelectUser = []
      if (users && users.length > 0) {
        this.singleSelectUser = users
        this.send.userid = users[0].Id
        this.send.username = users[0].Name
      }
    },
    handleBack() {
      this.backFlowDialogVisible = true
    },
    submitBackFlow() {
      var _this = this
      _this.backFlow.instanceId = _this.flowInstances.Id
      var rData = Object.assign({}, _this.backFlow)
      rData.attacth = _this.backFlow.attacth.length > 0 ? JSON.stringify(_this.backFlow.attacth) : ''
      backFlow(rData).then(res => {
        _this.$emit('loadData')
        _this.backCancel()
        _this.onCancel()
      })
    },
    backCancel() {
      this.backFlowDialogVisible = false
      this.backFlow = {
        instanceId: '',
        nodeId: '',
        content: '',
        attacth: []
      }
    },
    handleHastenTask() {
      var _this = this
      var rData = { instanceId: _this.flowInstances.Id }
      hastenTask(rData).then(res => {
        _this.$message.success('已发送催办消息')
      })
    },
    handleApostille() {
      this.apostilleDialogVisible = true
    },
    submitApostille() {
      var _this = this
      const loading = _this.$loading({
        lock: true,
        text: '正在提交...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      _this.apostille.instanceId = _this.flowInstances.Id
      _this.apostille.users = _this.selectUser
      var rData = Object.assign({}, _this.apostille)
      rData.attachment = _this.apostille.attachment.length > 0 ? JSON.stringify(_this.apostille.attachment) : ''
      apostille(rData).then(res => {
        if (_this.apostille.auditPass) {
          var verifi = {
            flowInstanceId: _this.flowInstances.Id,
            VerificationFinally: '1',
            VerificationOpinion: '同意',
            ActivityNodeId: _this.flowInstances.ActivityId,
            CustomVerifier: []
          }
          approval(verifi).then(res => {
            loading.close()
            _this.queryHistoriesData(_this.flowInstances.Id)
          }).catch(() => {
            loading.close()
          })
        } else {
          loading.close()
          _this.queryHistoriesData(_this.flowInstances.Id)
        }
        _this.apostilleCancel()
      }).catch(() => {
        loading.close()
      })
    },
    apostilleCancel() {
      this.apostilleDialogVisible = false
      this.selectUser = []
      this.apostille = {
        content: '',
        users: [],
        auditPass: true,
        attachment: []
      }
    },
    addApostille() {
      this.$refs.selectPersonDialog.showSelectPersonDialog()
    },
    delApostille(index) {
      var _this = this
      _this.selectUser.splice(index, 1)
    }
  }
}
</script>
<style  lang="scss" scoped>
::v-deep.el-input .el-input__inner {
  border-left: none;
  border-top: none;
  border-right: none;
  background-color: #fff;
}
::v-deep.el-textarea .el-textarea__inner {
  border-left: none;
  border-top: none;
  border-right: none;
  background-color: #fff;
}
::v-deep.flownode {
  .el-timeline-item__tail{
    border-left-color:#05b54a ;
  }
  .todo.el-timeline-item{
    .el-timeline-item__tail{
    border-left-color:#E4E7ED !important;
  }
  }
  .todo ~ .el-timeline-item{
    .el-timeline-item__tail{
    border-left-color:#E4E7ED !important;
  }
    .el-timeline-item__node{
      background-color: #E4E7ED !important;
    }
    .el-timeline-item__icon{ display: none !important;}
  }
}
</style>
